<template>
	<view class="pages">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar">
			<view :style="'height:' + statusBarHeight + 'px'"></view>
			<view class="navbar-content">
				<view class="navbar-left" @click="goBack">
					<uni-icons type="arrow-left" size="24" color="#333333"></uni-icons>
				</view>
				<text class="navbar-title">新品推荐</text>
				<view class="navbar-right"></view>
			</view>
		</view>

		<!-- 顶部搜索栏 -->
		<view class="search-box" id="searchBox">
			<uni-search-bar 
				cancelButton="none" 
				placeholder="搜索商品"  
				v-model="words" 
				bgColor="#FFFFFF" 
				@confirm="search"
				@input="onSearchInput"
				class="custom-search-bar"
			/>
		</view>

		<!-- 商品列表 -->
		<scroll-view 
			class="goods-list" 
			:scroll-y="true"
			@scrolltolower="loadmore"
			:lower-threshold="100"
		>
			<view class="list-container">
				<view 
					v-for="(item, index) in goodsList" 
					:key="index"
					class="goods-item"
					@click="openDetail(item.id)"
				>
					<!-- 商品图片容器 -->
					<view class="image-wrapper">
						<image 
							:src="getimg(item.image || item.images)" 
							class="goods-image"
							mode="aspectFill"
							lazy-load
						/>
						<!-- 新品角标 -->
						<view class="new-badge">
							<text class="new-text">NEW</text>
						</view>
					</view>
					
					<!-- 商品信息 -->
					<view class="goods-info">
						<text class="goods-title">{{ item.title }}</text>
						
						<!-- 规格信息 -->
						<view class="spec-row" v-if="item.guige">
							<text class="spec-label">规格：</text>
							<text class="spec-value">{{ item.guige }}</text>
						</view>
						
						<!-- 价格和分享奖励行 -->
						<view class="price-row">
							<view class="price-box">
								<text class="price-symbol">¥</text>
								<text class="price-value">{{ item.s_price }}</text>
								<text class="price-unit" v-if="item.danweip">/{{ item.danweip }}</text>
							</view>
							<!-- 分享赚奖励替换已购买人数 -->
							<view class="share-tag" @click.stop="shareProduct(item)" v-if="item.commission">
								<uni-icons type="redo" size="18" color="#FF6B6B"></uni-icons>
								<text class="reward-text">分享赚¥{{ item.commission }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 空状态 -->
			<view v-if="!loading && goodsList.length === 0" class="empty-state">
				<view class="empty-icon">🎁</view>
				<text class="empty-text">暂无新品推荐</text>
				<text class="empty-tip">敬请期待更多精彩商品</text>
			</view>

			<!-- 加载状态 -->
			<view v-if="loading" class="loading-box">
				<uni-load-more status="loading"></uni-load-more>
			</view>

			<!-- 没有更多 -->
			<view v-if="!haveMore && goodsList.length > 0" class="no-more">
				<text class="no-more-text">没有更多了~</text>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import $util from "@/util/util.js"

export default {
	data() {
		return {
			statusBarHeight: 0, // 状态栏高度
			words: '', // 搜索关键词
			goodsList: [], // 商品列表
			page: 1, // 当前页码
			loading: false, // 加载状态
			haveMore: true, // 是否还有更多数据
			searchTimer: null, // 搜索防抖定时器
		}
	},
	
	onLoad() {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight || 0;
		this.initData()
	},
	
	onShow() {
		// 页面显示时刷新数据
		this.refreshData()
	},
	
	// 下拉刷新
	onPullDownRefresh() {
		this.refreshData()
	},
	
	methods: {
		// 初始化数据
		initData() {
			this.getGoodsList()
		},
		
		// 刷新数据
		refreshData() {
			this.page = 1
			this.goodsList = []
			this.haveMore = true
			this.getGoodsList()
		},
		
		// 获取商品列表
		getGoodsList(loadMore = false) {
			if (this.loading) return
			
			this.loading = true
			
			if (!loadMore) {
				$util.showProgress()
			}
			
			$util.ajax({
				url: 'Mall/get_list',
				lei: 0,
				words: this.words,
				page: this.page,
				member: 1,
				is_recommend: 1
			}, (res) => {
				$util.hideProgress()
				uni.stopPullDownRefresh()
				this.loading = false
				
				if (res.code == 1 && res.data && res.data.length > 0) {
					if (loadMore) {
						this.goodsList = this.goodsList.concat(res.data)
					} else {
						this.goodsList = res.data
					}
					this.page += 1
				} else {
					this.haveMore = false
					if (!loadMore) {
						this.goodsList = []
					}
				}
			}, () => {
				$util.hideProgress()
				uni.stopPullDownRefresh()
				this.loading = false
			})
		},
		
		// 搜索输入处理
		onSearchInput(value) {
			// 防抖处理，避免频繁请求
			clearTimeout(this.searchTimer)
			this.searchTimer = setTimeout(() => {
				this.refreshData()
			}, 500)
		},
		
		// 搜索确认
		search(value) {
			clearTimeout(this.searchTimer)
			this.refreshData()
		},
		
		// 加载更多
		loadmore() {
			if (this.haveMore && !this.loading) {
				this.getGoodsList(true)
			}
		},
		
		// 打开商品详情
		openDetail(id) {
			$util.openwin('/pages/memberinfo/sharelist/sharedetail?id=' + id)
		},
		
		// 获取图片
		getimg(path) {
			return $util.get_img(path)
		},
		
		// 返回
		goBack() {
			uni.navigateBack()
		},
		
		// 分享商品
		shareProduct(item) {
			console.log('分享商品', item);
			
			// 检查登录
			if (!$util.isLogin()) {
				console.log('用户未登录');
				$util.login();
				return;
			}
			
			// #ifdef MP-WEIXIN
			try {
				// 使用showShareMenu显示分享菜单
				if (typeof uni.showShareMenu === 'function') {
					console.log('调用showShareMenu显示分享菜单');
					uni.showShareMenu({
						withShareTicket: true,
						menus: ['shareAppMessage'], // 只显示微信好友分享选项
						success: (res) => {
							console.log('分享菜单显示成功', res);
							$util.toast('请点击分享给好友');
						},
						fail: (err) => {
							console.error('分享菜单显示失败', err);
							$util.toast('分享功能暂不可用');
						}
					});
				} else {
					$util.toast('分享功能暂不可用');
				}
			} catch (error) {
				console.error('分享调用异常', error);
				$util.toast('分享异常，请重试');
			}
			// #endif
			
			// #ifndef MP-WEIXIN
			// 非微信环境提示
			$util.toast('请在微信中打开分享功能');
			// #endif
		}
	}
}
</script>

<style scoped>
.pages {
	width: 100%;
	max-width: 100vw;
	overflow-x: hidden;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f4 100%);
	min-height: 100vh;
	box-sizing: border-box;
}

/* 自定义导航栏 */
.custom-navbar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 100vw;
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(10px);
	z-index: 1000;
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
	box-sizing: border-box;
}

.navbar-content {
	width: 100%;
	height: 88rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	box-sizing: border-box;
}

.navbar-left {
	width: 80rpx;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.navbar-title {
	flex: 1;
	font-size: 36rpx;
	font-weight: 600;
	color: #333333;
	text-align: center;
	letter-spacing: 1rpx;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.navbar-right {
	width: 80rpx;
}

/* 搜索栏 */
.search-box {
	position: fixed;
	/* #ifdef MP-WEIXIN */
	top: calc(var(--status-bar-height) + 66rpx + 80rpx);
	/* #endif */
	/* #ifndef MP-WEIXIN */
	top: calc(var(--status-bar-height) + 80rpx);
	/* #endif */
	left: 0;
	width: 100%;
	max-width: 100vw;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(5px);
	padding: 20rpx;
	z-index: 999;
	box-sizing: border-box;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
}

.custom-search-bar {
	border-radius: 30rpx;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* 商品列表 */
.goods-list {
	width: 100%;
	max-width: 100vw;
	min-height: 100vh;
	padding: 0 20rpx 20rpx;
	background: transparent;
	box-sizing: border-box;
	overflow-x: hidden;
	/* #ifdef MP-WEIXIN */
	padding-top: calc(var(--status-bar-height) + 8rpx + 130rpx);
	margin-top: calc(var(--status-bar-height) + 8rpx + 130rpx);
	/* #endif */
	/* #ifndef MP-WEIXIN */
	padding-top: calc(var(--status-bar-height) + 8rpx + 120rpx);
	margin-top: calc(var(--status-bar-height) + 8rpx + 120rpx); 
	/* #endif */
}

.list-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	padding-top: 15rpx;
}

.goods-item {
	width: 100%;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 24rpx;
	margin-bottom: 24rpx;
	overflow: hidden;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
	transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
	box-sizing: border-box;
	transform: translateZ(0);
	backdrop-filter: blur(5px);
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.goods-item:active {
	transform: translateY(-8rpx) scale(1.01);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
	transition: all 0.2s ease;
}

.image-wrapper {
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
}

.goods-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4e7f4 100%);
	transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
	object-fit: cover;
}

.goods-item:active .goods-image {
	transform: scale(1.05);
}

.new-badge {
	position: absolute;
	top: 20rpx;
	left: 20rpx;
	background: linear-gradient(135deg, #FF6B6B, #FF8E53);
	padding: 8rpx 20rpx;
	border-radius: 30rpx;
	box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
	z-index: 10;
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 4px 16px rgba(255, 107, 107, 0.5);
		transform: scale(1.05);
	}
	100% {
		box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
		transform: scale(1);
	}
}

.new-text {
	font-size: 22rpx;
	color: #ffffff;
	font-weight: 600;
	letter-spacing: 1rpx;
}

.goods-info {
	width: 100%;
	padding: 24rpx;
	box-sizing: border-box;
}

.goods-title {
	width: 100%;
	font-size: 30rpx;
	color: #333333;
	line-height: 44rpx;
	height: 88rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-weight: 500;
	word-break: break-all;
	margin-bottom: 16rpx;
}

/* 规格信息 */
.spec-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10rpx;
	padding: 8rpx 12rpx;
	background: rgba(245, 247, 250, 0.7);
	border-radius: 16rpx;
}

.spec-label {
	font-size: 24rpx;
	color: #666666;
	font-weight: 500;
}

.spec-value {
	font-size: 24rpx;
	color: #333333;
	font-weight: 700;
	margin-left: 10rpx;
}

.price-row {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: 10rpx;
	box-sizing: border-box;
}

.price-box {
	display: flex;
	flex-direction: row;
	align-items: baseline;
}

.price-symbol {
	font-size: 26rpx;
	color: #FF6B6B;
	font-weight: 600;
}

.price-value {
	font-size: 42rpx;
	color: #FF6B6B;
	font-weight: 700;
	margin-left: 4rpx;
	text-shadow: 0 1px 2px rgba(255, 107, 107, 0.2);
}

.price-unit {
	font-size: 26rpx;
	color: #FF6B6B;
	margin-left: 4rpx;
	font-weight: 500;
}

/* 分享奖励 */
.share-tag {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 12rpx 24rpx;
	background: linear-gradient(135deg, #FFF5F5, #FFE8E8);
	border-radius: 30rpx;
	max-width: 100%;
	box-sizing: border-box;
	width: fit-content;
	box-shadow: 0 4px 12px rgba(255, 107, 107, 0.15);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
}

.share-tag::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
	transition: 0.5s;
}

.share-tag:hover::before {
	left: 100%;
}

.share-tag:active {
	transform: scale(0.95);
	box-shadow: 0 2px 8px rgba(255, 107, 107, 0.2);
}

.reward-text {
	font-size: 24rpx;
	color: #FF6B6B;
	margin-left: 10rpx;
	font-weight: 600;
	letter-spacing: 0.5rpx;
}

.commission-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-top: 10rpx;
}

.commission-label {
	font-size: 24rpx;
	color: #333333;
	font-weight: 500;
}

.commission-value {
	font-size: 24rpx;
	color: #333333;
	font-weight: 700;
}

/* 空状态 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 200rpx 0;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 30rpx;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
	animation: bounce 2s infinite;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-20rpx);
	}
	60% {
		transform: translateY(-10rpx);
	}
}

.empty-text {
	font-size: 32rpx;
	color: #666666;
	font-weight: 500;
	margin-bottom: 16rpx;
}

.empty-tip {
	font-size: 26rpx;
	color: #999999;
}

/* 加载状态 */
.loading-box {
	padding: 40rpx 0;
	display: flex;
	justify-content: center;
}

.no-more {
	padding: 40rpx 0;
	display: flex;
	justify-content: center;
}

.no-more-text {
	font-size: 24rpx;
	color: #999999;
}
</style>